 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>设置头像</title>
<script type="text/javascript" src="js/jquery-easyui-1.5.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.4.2/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.4.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.4.2/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.4.2/themes/black/easyui.css"/>
<link rel="stylesheet" type="text/css" href="css/taojin/layout.css">
</head>
<body>
	<script type="text/javascript">
	function PreviewImage(fileObj,imgPreviewId,divPreviewId){  
	    var allowExtention=".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;  
	    var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();              
	    var browserVersion= window.navigator.userAgent.toUpperCase();  
	    if(allowExtention.indexOf(extention)>-1){   
	        if(fileObj.files){//HTML5实现预览，兼容chrome、火狐7+等  
	            if(window.FileReader){  
	                var reader = new FileReader();   
	                reader.onload = function(e){  
	                    document.getElementById(imgPreviewId).setAttribute("src",e.target.result);  
	                }    
	                reader.readAsDataURL(fileObj.files[0]);  
	            }else if(browserVersion.indexOf("SAFARI")>-1){  
	                alert("不支持Safari6.0以下浏览器的图片预览!");  
	            }  
	        }else if (browserVersion.indexOf("MSIE")>-1){  
	            if(browserVersion.indexOf("MSIE 6")>-1){//ie6  
	                document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);  
	            }else{//ie[7-9]  
	                fileObj.select();  
	                if(browserVersion.indexOf("MSIE 9")>-1)  
	                    fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问  
	                var newPreview =document.getElementById(divPreviewId+"New");  
	                if(newPreview==null){  
	                    newPreview =document.createElement("div");  
	                    newPreview.setAttribute("id",divPreviewId+"New");  
	                    newPreview.style.width = document.getElementById(imgPreviewId).width+"px";  
	                    newPreview.style.height = document.getElementById(imgPreviewId).height+"px";  
	                    newPreview.style.border="solid 1px #d2e2e2";  
	                }  
	                newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";                              
	                var tempDivPreview=document.getElementById(divPreviewId);  
	                tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);  
	                tempDivPreview.style.display="none";                      
	            }  
	        }else if(browserVersion.indexOf("FIREFOX")>-1){//firefox  
	            var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);  
	            if(firefoxVersion<7){//firefox7以下版本  
	                document.getElementById(imgPreviewId).setAttribute("src",fileObj.files[0].getAsDataURL());  
	            }else{//firefox7.0+                      
	                document.getElementById(imgPreviewId).setAttribute("src",window.URL.createObjectURL(fileObj.files[0]));  
	            }  
	        }else{  
	            document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);  
	        }           
	    }else{  
	        alert("仅支持"+allowExtention+"为后缀名的文件!");  
	        fileObj.value="";//清空选中文件  
	        if(browserVersion.indexOf("MSIE")>-1){                          
	            fileObj.select();  
	            document.selection.clear();  
	        }                  
	        fileObj.outerHTML=fileObj.outerHTML;  
	    }  
	}
	
	function change_photo(){
		PreviewImage($("input[name='editHeadFileUpload']")[0], 'Img', 'Imgdiv');
		PreviewImage($("input[name='editHeadFileUpload']")[0], 'Img2', 'Imgdiv');
    }
	
	$(function(){
		$("#edit-head-button").linkbutton({
			onClick:function(){
				$("#head-upload-form").form({
					url:'uploadDeal',
					method:'post',
					onSubmit:function(param){
						
					},
					success:function(data){
						if(data =='true'){
							$.messager.alert('提示','保存成功!');
						}else{
							$.messager.alert('警告','添加失败!');
						}
					
					}
				}).submit();
			}
		})
		
	})
	</script>
	<div id="index-layout-base" class="easyui-layout" data-options="fit:true,border:false" >
		<div data-options="region:'center'">
			<div style="height: 430px;width: 480px;border: 1px solid white;border-radius: 5px;margin-left: 200px;margin-top: 50px;padding: 10px 20px;">
				
				<form id="head-upload-form" method="post" enctype="multipart/form-data">
					<div style="padding-top: 5px;">
					<input id="editHeadFileUpload" name="editHeadFileUpload" class="easyui-filebox" style="width: 260px;"
						data-options="buttonText:'选择文件',multiple:false,onChange:change_photo">
					</div>
				</form>
				
				<div id="Imgdiv">
  			 	     <img id="Img" style="height: 300px;width: 300px;margin-top: 20px;border-radius:10px;"/>
  			 	     	<div style="position: absolute;left: 530px;top: 280px;">头像预览:</div>
  			 	     <img id="Img2" style="height: 100px;width: 100px;margin-top: 20px;margin-left:20px;border-radius:10px;"/>
 			    </div>
				<div style="padding-top: 30px;font-size:20px;">
					<a id="edit-head-button" class="easyui-linkbutton" 
					style="height: 30px;width: 80px;"
						data-options="text:'上传'"></a>
				</div>
				
			</div>
			
			<%-- <form id="upload_form" enctype="multipart/form-data"  method="post">
       			 <input class="easyui-filebox" style="width:300px"
       			  data-options='onChange:change_photo' id="fileUpload" name="fileUpload"/><br/> 
    		</form>
   			 <div id="Imgdiv">
  			      <img id="Img" width="200px" height="200px"/>
 			  </div>
 			  <div id="Imgdiv2">
  			      <img id="Img2" width="100px" height="100px" src="${myHead }"/>
 			  </div>
 			  <a id="edit-priorityRole-button" class="easyui-linkbutton" 
					style="height: 40px;width: 100px;"
						data-options="text:'提交'"></a> --%>
  	    </div>
    </div>
</body>
</html>